<script setup lang="ts">
import { ref } from 'vue'
import type { LoginFormDataType } from '@/types/login'
import type {  FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { loginDataApi } from '@/apis/login'
import { useUserStore } from '@/stores'
import router from '@/router'

// 登录表单数据
const loginFormData = ref<LoginFormDataType & { isChecked: string }>({
  mobile: '15567890678',
  code: '246810',
  isChecked:''
})
const checkboxRule = (rule:object, value:boolean, callback:(error?:Error)=>void)=>{
  if(value){
    callback()
  }else{
    callback(new Error('请阅读并同意用户协议和隐私条款'))
  }
}
// 表单验证规则
const userRules = ref<FormRules<LoginFormDataType & { isChecked: boolean}>>({
  mobile: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { pattern: /^\d{6}$/, message: '请输入6位数字验证码',}
  ],
  isChecked: [
    { validator:checkboxRule, trigger: 'change' }
  ]
})

// 登录提交
const loginForm = ref<FormInstance>()
const useUserData = useUserStore()
const loginSubmit = async () => {
  // 表单验证
  await loginForm.value?.validate()
  // 登录请求
  const res = await loginDataApi({
    mobile: loginFormData.value.mobile,
    code: loginFormData.value.code
  })
  useUserData.setUserInfo(res.data.data)
  ElMessage.success({
    message: '登录成功',
    type: 'success'
  })
  router.replace('/')
}

</script>

<template>
  <div class="login">
    <!-- 卡片 -->
    <el-card class="login-card">
      <!-- logo -->
      <img class="login-img" src="@/assets/login.png" alt="">
      <!-- 表单 -->
      <el-form :model="loginFormData" :rules="userRules" ref="loginForm">
        <!-- 手机号 -->
        <el-form-item prop="mobile">
          <el-input v-model="loginFormData.mobile" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="code">
          <el-input v-model="loginFormData.code" placeholder="请输入验证号"></el-input>
        </el-form-item>
        <!-- 勾选 -->
        <el-form-item prop="isChecked">
          <el-checkbox v-model="loginFormData.isChecked" value="ture">我已阅读并同意「用户协议」和「隐私条款」</el-checkbox>
        </el-form-item>
        <!-- 登录 -->
        <el-form-item>
          <el-button type="primary" @click="loginSubmit">登 录</el-button>
        </el-form-item>
      </el-form>
      {{ loginFormData }}
    </el-card>
  </div>
</template>

<style lang="less">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background-image: url('@/assets/login_bg.png');
  .login-card {
    width: 440px;
    height: 380px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 50px rgba(0,0,0,0.1);
    .login-img {
      width: 200px;
      display: block;
      margin: 0 auto 20px;
    }
    .el-form {
      padding: 0 20px;
      .el-form-item {
        margin-bottom: 25px;
      }
      .el-input {
        height: 40px
      }
      .el-button {
        width: 100%;
        height: 40px;
      }
    }
  }
}

</style>
